<template>
	<view class="container">
		<!-- 1. 店铺头部信息 -->
		<view class="warp">
			<!-- 店铺名称/头像区域 -->
			<view class="of-header u-flex u-col-center"
				:style="{height: height + 'px', paddingTop: statusBarHeight + 'px'}" v-if="shopData && shopData.id">
				<view class="img">
					<image :src="http + shopData.image" mode="aspectFill"></image>
				</view>
				<view class="name u-flex u-col-center" @click="$pageTo('/pages/index/changeShop')">
					<view class='text u-l-1'>{{shopData.name}}</view>
					<image src="../../static/image/of1.png" mode="aspectFill"></image>
				</view>
			</view>

			<!-- 2. 主体内容区：左侧日期选择 + 右侧菜品列表 -->
			<view class="of-container u-flex u-col-center u-row-between">
				<!-- 左侧：日期和餐段选择 -->
				<view class="of-left">
					<scroll-view scroll-y="true" class="scroll-Y1">
						<view class="item" v-for="(item,index) in dayList" :key="index">
							<!-- 日期显示（今天/明天/后天） -->
							<view class="time" :class="{oo: findex1 == index}" @click="changeTime(item,index)">
								{{getTime(item.date, index)}}
								<text class="day">({{weeks[item.week]}})</text>
								<text class="num" v-if="getDayNumber(item,cartList2) > 0">
									{{getDayNumber(item,cartList2)}}
								</text>
								<image src="../../static/image/index4.png" mode="aspectFill"></image>
							</view>
							<!-- 餐段选择（早餐/午餐） -->
							<view class="slist" v-if="findex1 == index">
								<view class="i" :class="{on: findex1 == index && findex2 == 1}"
									@click="changeTime2(1, item, index)">
									早餐
								</view>
								<view class="i" :class="{on: findex1 == index && findex2 == 2}"
									@click="changeTime2(2, item, index)">
									午餐
								</view>
								<view class="i" :class="{on: findex1 == index && findex2 == 3}"
									@click="changeTime2(3, item, index)">
									健康主义
								</view>
								<view class="i" :class="{on: findex1 == index && findex2 == 4}"
									@click="changeTime2(4, item, index)">
									晚餐
								</view>
							</view>
						</view>
						<view style="width:100%;height: 150rpx;"></view>
					</scroll-view>
				</view>

				<!-- 右侧：菜品列表展示 -->
				<view class="of-right">
					<scroll-view scroll-y="true" class="scroll-Y2">
						<view class="block" v-for="(item,index) in list" :key="index">
							<!-- 菜品分类标题 -->
							<view class="title" v-if="item.list.length > 0">
								{{item.name}}
							</view>
							<!-- 菜品列表 -->
							<view class="list" v-if="item.list.length > 0">
								<view class="item u-flex u-col-top u-row-between" v-for="(item2,index2) in item.list"
									:key="index2" @click="pageToData(index, item2.id, item2.dish.type)">
									<!-- 菜品图片 -->
									<view class="img">
										<image :src="http + item2.dish.image" mode="aspectFill"></image>
										<view class="text" v-if="item2.number == 0">
											库存:{{item2.number}}
										</view>
									</view>
									<!-- 菜品信息 -->
									<view class="con">
										<view class="name u-l-1">{{item2.dish.name}}</view>
										<view class="info u-l-1" v-if="item2.dish.match_dish.length > 0">
											<text v-for="(item3,index3) in item2.dish.match_dish" :key="index3">
												{{item3.name}}
											</text>
										</view>
										<!-- 价格和操作按钮 -->
										<view class="p-b u-flex u-col-center u-row-between">
											<view class="price">
												<text class="t1">￥</text>
												<text class="t2">{{item2.dish.price}}</text>
												<text class="t3" v-if="item2.dish.spec == 1">起</text>
											</view>
											<view class="btn" :class="{btnx: item2.number == 0}"
												@click.stop="pageToData2(index, item2)">
												<block v-if="item2.dish.spec == 1 || item2.dish.type == 2">选规格</block>
												<image src="@/static/image/add2.png" mode="aspectFill" v-else></image>
												<text v-if="getRightNumber(item2, cartList)">
													{{getRightNumber(item2, cartList)}}
												</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<!-- 无菜品提示 -->
						<view class="nogoods" v-if="nogoods">
							<image src="../../static/image/nogoods.png" mode="aspectFill"></image>
						</view>
						<view style="width:100%;height: 150rpx;"></view>
					</scroll-view>
				</view>
			</view>
		</view>

		<!-- 3. 底部结算栏 -->
		<view class="of-footer">
			<!-- 购物车图标 -->
			<view class="l" @click="cartShow = !cartShow">
				<image src="../../static/image/of2.png" mode="aspectFill"></image>
				<view class="num" v-if="getCartNumber(cartList)">{{getCartNumber(cartList)}}</view>
			</view>
			<!-- 合计信息 -->
			<view class="c u-flex" @click="cartShow = !cartShow">
				<text class="c1">合计</text>
				<text class="c2">￥</text>
				<text class="c3">{{getCartPrices(cartList)}}</text>
				<image src="../../static/image/of32.png" mode="aspectFill" v-if="cartShow"></image>
				<image src="../../static/image/of3.png" mode="aspectFill" v-else></image>
			</view>
			<!-- 结算按钮 -->
			<view class="r" @click="gobuy">
				<view class="t">去结算</view>
				<view class="p">Order</view>
			</view>
		</view>

		<!-- 4. 购物车弹窗相关 -->
		<!-- 遮罩层 -->
		<view class="cart-bg" v-if="cartShow || show" @click="cartShow = false; show = false"></view>

		<!-- 购物车弹窗 -->
		<view class="cart-pop" :class="{no: cartList2.length == 0}" v-if="cartShow">
			<view class="top-title u-flex u-col-center u-row-between">
				<view class="l">购物车</view>
				<view class="r u-flex u-col-center u-row-right" @click="open">
					<image src="../../static/image/of4.png" mode="aspectFill"></image>
					<text>清空购物车</text>
				</view>
			</view>

			<!-- 购物车列表 -->
			<view class="cart-list" v-if="cartList2.length > 0">
				<view class="item" v-for="(item,index) in cartList2" :key="index">
					<view class="i-top">
						<image src="../../static/image/of5.png" mode="aspectFill"></image>
						<text class="t1">{{getDay2(item.upday)}} {{getDay3(item.uptime)}}</text>
						<text class="t2">可取餐</text>
					</view>

					<view class="i-middle u-flex u-col-top u-row-between" v-for="(item2,index2) in item.list"
						:key="index2">
						<view class="img">
							<image :src="http + item2.goods_data.dish.image" mode="aspectFill"></image>
						</view>
						<view class="con">
							<view class="name">
								{{item2.goods_data.dish.name}}
								<text @click="changeCat(item2)"
									v-if="item2.goods_data.dish.spec == 1 || item2.goods_data.dish.type == 2">
									更改
								</text>
							</view>
							<view class="info" v-if="item2.goods_data.dish.spec == 1">
								<view class="i">{{item2.spec_name}}</view>
							</view>
							<view class="info" v-else>
								<view class="i" v-if="item2.goods_data.dish.type == 2">
									x1 {{item2.goods_data.dish.contain_title}}*{{item2.goods_data.dish.contain_number}}份
								</view>
								<view class="i" v-for="(item3,index3) in item2.match_dish" :key="index3">
									x{{item3.number}} {{item3.dish_name}}
									<text v-if="item3.spec_name">({{item3.spec_name}})</text>
								</view>
							</view>
							<!-- 数量操作 -->
							<view class="p-b u-flex u-col-center u-row-between">
								<view class="price">￥<text>{{item2.oneprice}}</text></view>
								<view class="nums u-flex u-col-center u-row-between">
									<view class="il" @click="sub(index, index2, item2)">-</view>
									<view class="ic">{{item2.number}}</view>
									<view class="ir" @click="add(index, index2, item2)">+</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="empty"></view>
			</view>

			<!-- 空购物车提示 -->
			<view class="nocart" v-else>
				<image src="../../static/image/cart.png" mode="aspectFill"></image>
			</view>
		</view>

		<!-- 5. 清空购物车确认弹窗 -->
		<view class="pop-del" v-if="show">
			<view class="title">确认要清空购物车吗？</view>
			<view class="btns u-flex u-col-center u-row-between">
				<view class="btn btn1" @click="close">取消</view>
				<view class="btn btn2" @click="delCart">确认</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 页面布局相关
				navBarHeight: 0,
				statusBarHeight: 0,
				height: 0,

				// 状态控制
				cartShow: false,
				show: false,
				findex1: 0,
				findex2: 1,
				nogoods: false,

				// 数据存储
				tlist: [],
				list1: [],
				list2: [],
				longitude: '',
				latitude: '',
				shopData: {},
				dayList: [],
				list: [],
				cartList: [],
				cartList2: [],
				uid: "",

				// 常量
				http: this.$imgUrl,
				weeks: ['', '周一', '周二', '周三', '周四', '周五', '周六', '周日']
			}
		},

		onLoad() {
			// 初始化导航栏高度
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			uni.getSystemInfo({
				success: (res) => {
					const statusBarHeight = res.statusBarHeight;
					const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2;
					this.navBarHeight = navBarHeight;
					this.statusBarHeight = statusBarHeight;
					this.height = this.navBarHeight + this.statusBarHeight;
				}
			});

			// 登录状态检查
			if (!uni.getStorageSync('uid')) {
				this.login();
			} else {
				this.uid = uni.getStorageSync('uid');
			}
		},

		onShow() {
			this.getLeftList();
			this.longitude = uni.getStorageSync("lng");
			this.latitude = uni.getStorageSync("lat");

			// 初始化店铺数据和日期列表
			if (uni.getStorageSync('shopData')) {
				this.shopData = JSON.parse(uni.getStorageSync('shopData'));
				this.getDayList();
			} else {
				this.getHomeData();
			}
		},

		computed: {
			// 1. 购物车相关计算
			getRightNumber() {
				return (data, cartList) => {
					let list = cartList.filter(item =>
						item.upday == data.upday &&
						item.uptime == data.uptime &&
						item.id == data.id
					);
					return list.reduce((acc, cur) => acc + cur.number, 0);
				}
			},
			getDayNumber() {
				return (item, cartList2) => {
					if (cartList2.length == 0) return 0;
					let list = cartList2.filter(i => i.upday == item.upday);
					return list.length > 0 ?
						list.reduce((acc, subArr) => acc + subArr.list.reduce((a, b) => a + parseInt(b.number), 0),
							0) :
						0;
				}
			},
			getCartPrices() {
				return (list) => {
					let arr = list.filter(item =>
						item.shop_id == this.shopData.id &&
						this.formatYmd(new Date(item.upday)) >= this.formatYmd(new Date())
					);
					return arr.reduce((acc, cur) => acc + parseInt(cur.number) * parseFloat(cur.oneprice), 0).toFixed(
						2);
				}
			},
			getCartNumber() {
				return (list) => {
					let arr = list.filter(item =>
						item.shop_id == this.shopData.id &&
						this.formatYmd(new Date(item.upday)) >= this.formatYmd(new Date())
					);
					return arr.reduce((acc, cur) => acc + cur.number, 0);
				}
			},

			// 2. 日期格式化相关
			getTime() {
				return (time, index) => {
					function getDateInfo() {
						let today = new Date();
						let tomorrow = new Date(today);
						tomorrow.setDate(tomorrow.getDate() + 1);
						let dayAfterTomorrow = new Date(today);
						dayAfterTomorrow.setDate(dayAfterTomorrow.getDate() + 2);

						function formatDate(date) {
							let month = String(date.getMonth() + 1).padStart(2, '0');
							let day = String(date.getDate()).padStart(2, '0');
							return `${month}-${day}`;
						}

						return {
							today: formatDate(today),
							tomorrow: formatDate(tomorrow),
							dayAfterTomorrow: formatDate(dayAfterTomorrow)
						};
					}

					let result = getDateInfo();
					if (result.today === time) return '今天';
					if (result.tomorrow === time) return '明天';
					if (result.dayAfterTomorrow === time) return '后天';
					return time;
				}
			},
			getDay2() {
				return (data) => {
					let today = new Date();
					let tomorrow = new Date(today);
					tomorrow.setDate(tomorrow.getDate() + 1);
					let dayAfterTomorrow = new Date(today);
					dayAfterTomorrow.setDate(dayAfterTomorrow.getDate() + 2);

					function formatDate(date) {
						let year = date.getFullYear();
						let month = String(date.getMonth() + 1).padStart(2, '0');
						let day = String(date.getDate()).padStart(2, '0');
						return `${year}-${month}-${day}`;
					}
					if (data == formatDate(today)) return '今天';
					if (data == formatDate(tomorrow)) return '明天';
					if (data == formatDate(dayAfterTomorrow)) return '后天';
					return data.substring(5);
				}
			},
			getDay3() {
				return (data) => {
					if (data == 1) {
						return '11:00前'
					}
					if (data == 2) {
						return '14:00前'
					}
					if (data == 3) {
						return '18:00前'
					}
					if (data == 4) {
						return '20:00前'
					}
				}
			}
		},

		methods: {
			formatYmd(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			// 1. 购物车操作
			changeCat(data) {
				let url = '';
				if (data.goods_data.dish.type == 2) {
					uni.setStorageSync('user_match_dish', JSON.parse(JSON.stringify(data.match_dish)));
					url = `/pages/index/foodData?id=${data.id}&type=edit&uuid=${data.uuid}`;
				} else {
					url = `/pages/index/drinkData?id=${data.id}&spec_name=${data.spec_name}&uuid=${data.uuid}&type=edit`;
				}
				uni.navigateTo({
					url
				});
			},
			sub(index, index2, item2) {
				let n = this.cartList2[index].list[index2].number;
				let data = this.cartList2[index].list[index2];

				function arraysEqual(a, b) {
					return JSON.stringify(a) === JSON.stringify(b);
				}

				if (n == 1) {
					uni.showModal({
						title: '温馨提示',
						content: '要删除此餐品吗?',
						success: (res) => {
							if (res.confirm) {
								let findex = this.cartList.findIndex(i =>
									i.upday == this.cartList2[index].upday &&
									i.uptime == this.cartList2[index].uptime &&
									i.dish_data_id == data.dish_data_id &&
									i.spec_name == data.spec_name &&
									arraysEqual(i.match_dish, data.match_dish)
								);
								let uuid = findex > -1 ? this.cartList[findex].uuid : '';
								if (findex > -1) this.cartList.splice(findex, 1);
								this.cartList2[index].list.splice(index2, 1);

								if (this.cartList2[index].list.length == 0) {
									this.cartList2.splice(index, 1);
								}

								let cart = uni.getStorageSync('cartData');
								let findIndex = cart.findIndex(item => item.uuid == uuid);
								if (findIndex > -1) cart.splice(findIndex, 1);
								uni.setStorageSync('cartData', JSON.parse(JSON.stringify(cart)));
								this.$forceUpdate();
							}
						}
					});
				} else {
					this.cartList2[index].list[index2].number--;
					let findex = this.cartList.findIndex(i =>
						i.upday == this.cartList2[index].upday &&
						i.uptime == this.cartList2[index].uptime &&
						i.dish_data_id == data.dish_data_id &&
						i.spec_name == data.spec_name &&
						arraysEqual(i.match_dish, data.match_dish)
					);
					if (findex > -1) this.cartList[findex].number = this.cartList2[index].list[index2].number;

					let uuid = this.cartList[findex].uuid;
					let cart = uni.getStorageSync('cartData');
					let findIndex = cart.findIndex(item => item.uuid == uuid);
					if (findIndex > -1) cart[findIndex].number = this.cartList[findex].number;
					uni.setStorageSync('cartData', JSON.parse(JSON.stringify(cart)));
					this.$forceUpdate();
				}
			},
			add(index, index2, item2) {
				let id = this.cartList2[index].list[index2].id;
				let nums = this.cartList.filter(i => i.id == id).reduce((acc, cur) => acc + parseInt(cur.number), 0);
				let n = this.cartList2[index].list[index2].number;

				if (nums >= item2.goods_data.number) {
					uni.showToast({
						title: '库存不足',
						icon: "none"
					});
					return;
				}

				this.cartList2[index].list[index2].number++;
				let data = this.cartList2[index].list[index2];

				function arraysEqual(a, b) {
					return JSON.stringify(a) === JSON.stringify(b);
				}
				let findex = this.cartList.findIndex(i =>
					i.upday == this.cartList2[index].upday &&
					i.uptime == this.cartList2[index].uptime &&
					i.dish_data_id == data.dish_data_id &&
					i.spec_name == data.spec_name &&
					arraysEqual(i.match_dish, data.match_dish)
				);

				if (findex > -1) this.cartList[findex].number = this.cartList2[index].list[index2].number;
				let uuid = this.cartList[findex].uuid;

				let cart = uni.getStorageSync('cartData');
				let findIndex = cart.findIndex(item => item.uuid == uuid);
				if (findIndex > -1) cart[findIndex].number = this.cartList[findex].number;
				uni.setStorageSync('cartData', JSON.parse(JSON.stringify(cart)));
				this.$forceUpdate();
			},

			// 2. 菜品相关操作
			pageToData(index, id, type) {
				let url = type == 2 ? `/pages/index/foodData?id=${id}` : `/pages/index/drinkData?id=${id}`;
				uni.navigateTo({
					url
				});
			},
			pageToData2(index, data) {
				if (data.dish.type == 1 && data.dish.spec == 2 && data.number > 0) {
					this.addCart(data);
				} else {
					let url = data.dish.type == 2 ? `/pages/index/foodData?id=${data.id}` :
						`/pages/index/drinkData?id=${data.id}`;
					uni.navigateTo({
						url
					});
				}
			},
			addCart(foodData) {
				function generateRandomString(length) {
					const chars = '0123456789abcdefghijklmnopqrstuvwxyz';
					let result = '';
					for (let i = 0; i < length; i++) {
						result += chars[Math.floor(Math.random() * chars.length)];
					}
					return result;
				}

				let data = {
					uuid: generateRandomString(10),
					id: foodData.id,
					shop_id: this.shopData.id,
					upday: foodData.upday,
					uptime: foodData.uptime,
					dish_data_id: foodData.dish_id,
					spec_name: '',
					number: 1,
					oneprice: foodData.dish.price,
					price: foodData.dish.price,
					match_dish: [],
					goods_data: foodData
				};

				let list = uni.getStorageSync('cartData') ? JSON.parse(JSON.stringify(uni.getStorageSync('cartData'))) :
			[];
				if (list.length == 0) {
					uni.setStorageSync('cartData', [data]);
				} else {
					function arraysEqual(a, b) {
						return JSON.stringify(a) === JSON.stringify(b);
					}
					let findIndex = list.findIndex(item =>
						item.shop_id == data.shop_id &&
						item.upday == data.upday &&
						item.uptime == data.uptime &&
						item.dish_data_id == data.dish_data_id &&
						item.spec_name == data.spec_name &&
						arraysEqual(item.match_dish, data.match_dish)
					);

					let nums = list.filter(item => item.dish_data_id == data.dish_data_id).reduce((acc, cur) => acc +
						parseInt(cur.number), 0);
					if (nums >= foodData.number) {
						uni.showToast({
							title: '库存不足',
							icon: "none"
						});
						return;
					}

					if (findIndex > -1) {
						list[findIndex].number += 1;
					} else {
						list.push(data);
					}
					uni.setStorageSync('cartData', JSON.parse(JSON.stringify(list)));
				}

				uni.showToast({
					title: '添加成功',
					icon: "none"
				});

				// 更新购物车列表
				let list2 = JSON.parse(JSON.stringify(uni.getStorageSync('cartData')));
				this.cartList = list2.filter(item =>
					item.shop_id == this.shopData.id &&
					this.formatYmd(new Date(item.upday)) >= this.formatYmd(new Date())
				);

				function groupByUpdayAndUptime(arr) {
					const map = {};
					arr.forEach(item => {
						const {
							upday,
							uptime,
							...rest
						} = item;
						const key = `${upday}-${uptime}`;
						if (!map[key]) map[key] = {
							upday,
							uptime,
							list: []
						};
						map[key].list.push(rest);
					});
					return Object.values(map);
				}

				this.cartList2 = groupByUpdayAndUptime(this.cartList);
				this.cartList2.sort((a, b) => {
					if (a.upday === b.upday) return a.uptime - b.uptime;
					return new Date(a.upday) - new Date(b.upday);
				});
			},

			// 3. 数据请求
			getList() {
				const today = new Date();
				const year = today.getFullYear();
				const month = today.getMonth() + 1;
				let date = this.dayList[this.findex1].date;
				let month2 = parseInt(date.split('-')[0]);
				let day2 = month <= month2 ? `${year}-${date}` : `${year+1}-${date}`;

				this.$http.post('/app/dishs/dishList', {
					shop_id: this.shopData.id,
					day: day2,
					time: this.findex2
				}).then(res => {
					if (res.code == 0) {
						this.list = res.data.list;
						this.nogoods = this.list.every(item => item.list.length == 0);

						// 同步购物车数据
						if (uni.getStorageSync('cartData')) {
							let list = uni.getStorageSync('cartData');
							this.cartList = list.filter(item =>
								item.shop_id == this.shopData.id &&
								this.formatYmd(new Date(item.upday)) >= this.formatYmd(new Date())
							);

							function groupByUpdayAndUptime(arr) {
								const map = {};
								arr.forEach(item => {
									const {
										upday,
										uptime,
										...rest
									} = item;
									const key = `${upday}-${uptime}`;
									if (!map[key]) map[key] = {
										upday,
										uptime,
										list: []
									};
									map[key].list.push(rest);
								});
								return Object.values(map);
							}

							this.cartList2 = groupByUpdayAndUptime(this.cartList);
							this.cartList2.sort((a, b) => {
								if (a.upday === b.upday) return a.uptime - b.uptime;
								return new Date(a.upday) - new Date(b.upday);
							});
							console.log(this.cartList, this.cartLis2, '=================');
						} else {
							this.cartList = [];
							this.cartList2 = [];
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				});
			},
			getDayList() {
				this.$http.post('/app/dishs/dayList', {
					shop_id: this.shopData.id
				}).then(res => {
					if (res.code == 0) {
						this.dayList = res.data.list;
						this.dayList.forEach(item => {
							let t = parseInt(item.date.split('-')[0]);
							let today = new Date();
							let y = today.getFullYear();
							let m = today.getMonth() + 1;
							item.upday = t >= m ? `${y}-${item.date}` : `${y+1}-${item.date}`;
						});
						this.getList();
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				});
			},
			getHomeData() {
				this.$http.post('/app/homes/index', {
					longitude: this.longitude,
					latitude: this.latitude,
				}).then(res => {
					if (res.code == 0) {
						let shopList = res.data.shopList;
						if (!uni.getStorageSync('shopData')) {
							this.shopData = shopList[0];
							uni.setStorageSync('shopData', JSON.stringify(this.shopData));
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				});
			},
			getLeftList() {
				function getNext15Days() {
					const today = new Date();
					const tomorrow = new Date(today);
					tomorrow.setDate(today.getDate() + 1);
					const dates = [];
					for (let i = 0; i < 15; i++) {
						const nextDay = new Date(tomorrow);
						nextDay.setDate(tomorrow.getDate() + i);
						dates.push(nextDay.toISOString().split('T')[0]);
					}
					return dates;
				}
				this.tlist = getNext15Days();
			},

			// 4. 页面交互
			gobuy() {
				if (this.cartList2.length == 0) {
					uni.showToast({
						title: '至少选择一个',
						icon: "none"
					});
					return;
				}
				uni.navigateTo({
					url: '/pages/index/confirmOrder'
				});
			},
			delCart() {
				// 	let arry = uni.getStorageSync('cartData') ? JSON.parse(JSON.stringify(uni.getStorageSync('cartData'))) :
				// [];
				// 	// 只保留“非当前店铺”或“当前店铺但日期在今天及以后”的数据（即删除“当前店铺且过期”的数据）
				// 	let arry2 = arry.filter(item =>
				// 		item.shop_id != this.shopData.id ||
				// 		this.formatYmd(new Date(item.upday)) >= this.formatYmd(new Date())
				// 	);

				// 	if (arry2.length == 0) {
				// 		uni.removeStorageSync('cartData');
				// 	} else {
				// 		uni.setStorageSync('cartData', JSON.parse(JSON.stringify(arry2)));
				// 	}


				uni.removeStorageSync('cartData');
				this.cartList = [];
				this.cartList2 = [];
				this.show = false;
			},
			changeTime(item, index) {
				this.findex1 = index;
				this.findex2 = 1;
				this.getList();
			},
			changeTime2(i, item, index) {
				this.findex2 = i;
				this.getList();
			},
			open() {
				this.cartShow = false;
				this.show = true;
			},
			close() {
				this.show = false;
			},

			// 5. 登录相关
			login() {
				uni.login({
					provider: 'weixin',
					success: (r) => {
						if (r.errMsg == 'login:ok') {
							this.$http.post('/app/indexs/login', {
								code: r.code
							}).then(res => {
								if (res.code == 0 && res.data.id) {
									this.uid = res.data.id;
									uni.setStorageSync('uid', res.data.id);
								} else {
									uni.showToast({
										title: res.msg,
										icon: "none"
									});
								}
							}).catch(err => {
								console.log('表单错误信息：', err);
							});
						}
					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	@color: #E51B00;

	.container {

		/* 1. 基础布局 */
		.warp {
			display: flex;
			width: 100vw;
			height: 100vh;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
		}

		/* 2. 店铺头部 */
		.of-header {
			width: 100%;
			background-color: #fff;
			padding: 0 200rpx 0 20rpx;
			box-sizing: border-box;

			.img {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.name {
				flex: 1;
				width: 1rpx;
				margin-left: 10rpx;

				.text {
					font-size: 36rpx;
					color: #333;
					height: 40rpx;
					line-height: 40rpx;
					font-weight: 600;
				}

				image {
					width: 40rpx;
					height: 40rpx;
					margin-left: 10rpx;
				}
			}
		}

		/* 3. 主体内容区 */
		.of-container {
			flex: 1;
			width: 100%;
			height: 1rpx;

			/* 左侧日期选择 */
			.of-left {
				width: 180rpx;
				height: 100%;

				.scroll-Y1 {
					width: 100%;
					height: 100%;
					box-sizing: border-box;
				}

				.item {
					.time {
						width: 100%;
						height: 100rpx;
						line-height: 100rpx;
						background: #FFFFFF;
						font-size: 28rpx;
						color: #AEAEAE;
						text-align: center;
						position: relative;

						.day {
							font-size: 20rpx;
							margin-left: 5rpx;
						}

						.num {
							position: absolute;
							top: 10rpx;
							right: 10rpx;
							padding: 0 5rpx;
							min-width: 28rpx;
							height: 28rpx;
							line-height: 28rpx;
							background: @color;
							color: #fff;
							font-size: 18rpx;
							border-radius: 14rpx;
							box-sizing: border-box;
						}

						image {
							position: absolute;
							width: 44rpx;
							height: 8rpx;
							bottom: 10rpx;
							left: 50%;
							margin-left: -22rpx;
							display: none;
						}
					}

					.oo {
						background-color: #F9F9F9;

						image {
							display: block;
						}
					}

					.slist {
						.i {
							width: 140rpx;
							height: 52rpx;
							background: #FFFFFF;
							border-radius: 25rpx;
							line-height: 52rpx;
							text-align: center;
							color: #AEAEAE;
							font-size: 26rpx;
							margin: 20rpx auto;
						}

						.on {
							color: #000;
						}
					}
				}
			}

			/* 右侧菜品列表 */
			.of-right {
				width: 1rpx;
				flex: 1;
				height: 100%;
				background-color: #F9F9F9;
				border-top-left-radius: 20rpx;
				box-sizing: border-box;

				.scroll-Y2 {
					width: 100%;
					height: 100%;
					box-sizing: border-box;
					padding: 20rpx;
					position: relative;

					.nogoods {
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 360rpx;
							height: 360rpx;
						}
					}
				}

				.block {
					padding-bottom: 10rpx;

					.title {
						font-size: 28rpx;
						color: #000;
						font-weight: 500;
						height: 40rpx;
						line-height: 40rpx;
					}

					.list {
						.item {
							background-color: #fff;
							border-radius: 20rpx;
							padding: 20rpx;
							margin-top: 20rpx;

							.img {
								width: 160rpx;
								height: 160rpx;
								border-radius: 20rpx;
								overflow: hidden;

								image {
									width: 100%;
									height: 100%;
								}

								position: relative;

								.text {
									position: absolute;
									left: 0;
									right: 0;
									bottom: 0;
									background-color: rgba(0, 0, 0, 0.5);
									height: 60rpx;
									line-height: 60rpx;
									color: #fff;
									font-size: 28rpx;
									text-align: center;
								}
							}

							.con {
								flex: 1;
								width: 1rpx;
								margin-left: 20rpx;

								.name {
									height: 50rpx;
									font-weight: 500;
									font-size: 28rpx;
									color: #000;
									line-height: 50rpx;
								}

								.info {
									height: 40rpx;
									line-height: 40rpx;
									font-size: 24rpx;
									color: #B5B5BB;

									text {
										padding: 0 5rpx;
									}
								}

								.p-b {
									margin-top: 20rpx;

									.price {
										height: 60rpx;
										line-height: 60rpx;
										font-family: "DIN";

										.t1 {
											font-size: 24rpx;
											color: @color;
										}

										.t2 {
											font-size: 40rpx;
											font-weight: 600;
											color: @color;
											padding: 0 5rpx;
										}

										.t3 {
											font-size: 24rpx;
											color: #D1D1D6;
										}
									}

									.btn {
										width: 88rpx;
										height: 44rpx;
										line-height: 44rpx;
										text-align: center;
										background: #000;
										border-radius: 22rpx;
										font-size: 22rpx;
										color: #fff;
										position: relative;
										display: flex;
										align-items: center;
										justify-content: center;

										image {
											width: 24rpx;
											height: 24rpx;
										}

										text {
											position: absolute;
											top: -15rpx;
											right: 0;
											height: 28rpx;
											line-height: 28rpx;
											padding: 0 5rpx;
											background: @color;
											border-radius: 24rpx;
											min-width: 28rpx;
											font-size: 18rpx;
										}
									}

									.btnx {
										background: #D1D1D6;
									}
								}
							}
						}
					}
				}
			}
		}

		/* 4. 底部结算栏 */
		.of-footer {
			position: fixed;
			left: 20rpx;
			right: 20rpx;
			bottom: 20rpx;
			height: 120rpx;
			background: #000;
			border-radius: 60rpx;
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			z-index: 999;

			.l {
				position: relative;
				width: 90rpx;
				height: 124rpx;
				margin-top: -30rpx;

				image {
					width: 90rpx;
					height: 124rpx;
				}

				.num {
					position: absolute;
					height: 30rpx;
					line-height: 30rpx;
					background: @color;
					border-radius: 15rpx;
					font-size: 20rpx;
					top: 0;
					right: -10rpx;
					color: #fff;
					min-width: 30rpx;
					padding: 0 6rpx;
					text-align: center;
				}
			}

			.c {
				flex: 1;
				padding: 0 20rpx;
				width: 1rpx;
				color: #FFFFFF;
				height: 100rpx;
				line-height: 100rpx;
				align-items: center;

				.c1 {
					font-size: 30rpx;
				}

				.c2 {
					font-size: 28rpx;
					padding: 0 10rpx;
				}

				.c3 {
					font-weight: 600;
					font-size: 40rpx;
				}

				image {
					width: 48rpx;
					height: 48rpx;
					margin-left: 10rpx;
				}
			}

			.r {
				width: 160rpx;
				height: 80rpx;
				background: @color;
				border-radius: 40rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.t {
					height: 40rpx;
					line-height: 40rpx;
					font-size: 30rpx;
					color: #FFFFFF;
				}

				.p {
					height: 30rpx;
					line-height: 30rpx;
					font-size: 18rpx;
					color: #FFFFFF;
				}
			}
		}

		/* 5. 购物车弹窗 */
		.cart-bg {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 99;
		}

		.cart-pop {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #fff;
			padding: 30rpx 20rpx;
			border-radius: 40rpx 40rpx 0 0;
			max-height: 70vh;
			min-height: 20vh;
			overflow-y: auto;
			z-index: 998;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;

			.top-title {
				width: 100%;
				height: 60rpx;
				line-height: 60rpx;

				.l {
					font-size: 36rpx;
					color: #000;
					font-weight: 600;
				}

				.r {
					image {
						width: 28rpx;
						height: 28rpx;
						margin-right: 5rpx;
					}

					text {
						font-size: 26rpx;
						color: #B1B1B1;
					}
				}
			}

			.cart-list {
				margin-top: 30rpx;
				width: 100%;
				flex: 1;
				height: 1rpx;
				overflow-y: auto;

				.item {
					margin-bottom: 20rpx;

					.i-top {
						display: flex;
						align-items: center;
						font-weight: 500;

						image {
							width: 32rpx;
							height: 32rpx;
							margin-right: 10rpx;
						}

						.t1 {
							font-size: 32rpx;
							color: @color;
						}

						.t2 {
							font-size: 32rpx;
							color: #000;
							margin-left: 10rpx;
						}
					}

					.i-middle {
						border-bottom: 2rpx solid #eee;
						padding: 30rpx 0;

						.img {
							width: 100rpx;
							height: 100rpx;
							border-radius: 12rpx;
							overflow: hidden;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.con {
							flex: 1;
							width: 1rpx;
							margin-left: 20rpx;

							.name {
								height: 40rpx;
								line-height: 40rpx;
								font-weight: 500;
								font-size: 28rpx;
								color: #000;

								text {
									height: 32rpx;
									line-height: 28rpx;
									border-radius: 16rpx;
									border: 2rpx solid @color;
									color: @color;
									font-size: 24rpx;
									margin-left: 20rpx;
									padding: 0 10rpx;
									display: inline-block;
								}
							}

							.info {
								margin-top: 15rpx;

								.i {
									font-size: 24rpx;
									color: #B5B5BB;
									line-height: 40rpx;

									text {
										color: #E6A23C;
										margin-left: 6rpx;
										font-size: 20rpx;
									}
								}
							}

							.p-b {
								margin-top: 20rpx;

								.price {
									color: @color;
									height: 60rpx;
									line-height: 60rpx;
									font-size: 24rpx;

									text {
										font-size: 40rpx;
										font-weight: 600;
									}
								}

								.nums {
									.il {
										width: 68rpx;
										height: 44rpx;
										background: #FFFFFF;
										border-radius: 22rpx;
										border: 2rpx solid #000;
										text-align: center;
										line-height: 32rpx;
										color: #000;
										font-size: 60rpx;
										box-sizing: border-box;
									}

									.ic {
										padding: 0 20rpx;
										font-size: 30rpx;
										color: @color;
										font-weight: 600;
									}

									.ir {
										width: 68rpx;
										height: 44rpx;
										background: #000;
										border-radius: 22rpx;
										text-align: center;
										line-height: 36rpx;
										color: #fff;
										font-size: 48rpx;
										box-sizing: border-box;
									}
								}
							}
						}
					}
				}

				.empty {
					width: 100%;
					height: 150rpx;
				}
			}

			.nocart {
				padding: 20rpx 60rpx 180rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 252rpx;
					height: 252rpx;
				}
			}
		}

		.no {
			height: 600rpx;
			min-height: 400rpx;
		}

		/* 6. 清空购物车弹窗 */
		.pop-del {
			width: 600rpx;
			height: 280rpx;
			background: #FFFFFF;
			position: fixed;
			z-index: 9999;
			border-radius: 20rpx;
			top: 50%;
			margin-top: -140rpx;
			left: 50%;
			margin-left: -300rpx;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			padding: 20rpx;

			.title {
				height: 40rpx;
				line-height: 40rpx;
				font-size: 32rpx;
				color: #11192D;
			}

			.btns {
				margin-top: 60rpx;
				width: 100%;

				.btn {
					width: 260rpx;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 30rpx;
					border-radius: 40rpx;
				}

				.btn1 {
					background: #F4F4F4;
					color: #11192D;
				}

				.btn2 {
					background: @color;
					color: #fff;
				}
			}
		}
	}
</style>